<template>
	<view class="box">
		<form @submit="formSubmit" @reset="reset">
			<view class="uni-form-item">
				<input name="username" placeholder="请输入用户名" />
			</view>
			<view class="uni-form-item">
				<input name="pwd1" type="password" placeholder="请输入密码" />
			</view>
			<view class="uni-form-item">
				<input name="pwd2" type="password" placeholder="请再输入密码" />
			</view>
			<view class="uni-form-item">
				<input name="email" placeholder="请输入邮箱" />
			</view>
			<view class="btn-area">
				<button formType="submit" type="primary">注册</button>
				<button type="default" formType="reset">重置</button>
			</view>
		</form>
	</view>
</template>

<script>
	var graceChecker = require("../../common/graceChecker.js");
	import {
		register
	} from '../../common/api.js'
	export default {
		data() {
			return {}
		},
		methods: {
			formSubmit(e) {
				//定义表单规则
				var rule = [{
						name: "username",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请填写用户名"
					},
					{
						name: "pwd1",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请输入密码"
					},
					{
						name: "pwd2",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请再输入密码"
					},
					{
						name: "email",
						checkType: "email",
						checkRule: "",
						errorMsg: "请填写邮箱"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					let reqData = {}
					reqData.user_name = formData.username
					reqData.user_password = formData.pwd1
					reqData.user_com_passwd = formData.pwd2
					reqData.user_email = formData.email
					register(reqData).then(res => {
						let resData = res.data
						if (resData.status === 'error') {
							uni.showToast({
								title: resData.msg,
								icon: "none"
							});
						} else {
							uni.showToast({
								title: '注册成功',
								icon: "none"
							})
							uni.reLaunch({
								url: '../tabBar/my/my'
							})
						}

					}).catch(error => {
						console.log(error)
					})

				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			reset() {
				this.chosen = ''
			}
		},
		onLoad() {},
		onShow: function() {

		},
	}
</script>

<style>
	.box {
		padding: 40upx 30upx 0;
	}

	.uni-form-item {
		padding: 10upx 20upx;
		margin-bottom: 20upx;
		background-color: #F9F9F9;
	}

	.btn-area button {
		margin-bottom: 20upx;
	}
</style>
